<template>
  <a-card :bordered="bordered" :loading="loading" class="stat-card-component">
    <a-statistic :title="title" :value="value" :precision="precision" :value-style="valueStyle">
      <template v-if="prefix" #prefix>
        <component :is="prefix" />
      </template>
      <template v-if="suffix" #suffix>
        <component :is="suffix" />
      </template>
    </a-statistic>
    <div v-if="footer" class="stat-card-footer">
      <slot name="footer">{{ footer }}</slot>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  title: string
  value: number | string
  precision?: number
  color?: string
  prefix?: any
  suffix?: any
  footer?: string
  bordered?: boolean
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  precision: 0,
  color: '#1890ff',
  bordered: false,
  loading: false,
})

const valueStyle = computed(() => ({
  color: props.color,
}))
</script>

<style scoped>
.stat-card-component {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.3s;
}

.stat-card-component:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.stat-card-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  color: #666;
  font-size: 13px;
}
</style>
